<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ADMIN</title>
    <link rel="stylesheet" href="./css/admin/base-v2.css">
    <link rel="stylesheet" href="./css/admin/app.css">
</head>

<body>

    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">
                <div class="title">分页</div>
            </div>
        </div>

        <div class="app-page-content">
            <div class="app-card">
                <div class="app-card-body">
                    <!-- 后台分页 -->
                    <div class="z-ovh">
                        <!-- 首页 -->
                        <div class="z-page z-pat z-fr">
                            <span class="active">1</span>
                            <a href="#">2</a>
                            <a href="#">3</a>
                            <a href="#" class="last">尾页</a>
                            <a href="#" class="next">下一页</a>
                        </div>
                    </div>
                    <div class="z-ovh">
                        <!-- 中间页 -->
                        <div class="z-page z-pat z-fr">
                            <a data-page="4" href="javascript:;">上一页</a>
                            <a data-page="1" href="javascript:;">首页</a>
                            <a data-page="3" href="javascript:;">3</a>
                            <a data-page="4" href="javascript:;">4</a>
                            <span class="active">5</span>
                            <a data-page="6" href="javascript:;">6</a>
                            <a data-page="7" href="javascript:;">7</a>
                            <a data-page="20" href="javascript:;">尾页</a>
                            <a data-page="6" href="javascript:;">下一页</a>
                        </div>
                    </div>
                    <div class="z-ovh">
                        <!-- 尾页 -->
                        <div class="z-page z-pat z-fr">
                            <a data-page="19" href="javascript:;">上一页</a>
                            <a data-page="1" href="javascript:;">首页</a>
                            <a data-page="16" href="javascript:;">16</a>
                            <a data-page="17" href="javascript:;">17</a>
                            <a data-page="18" href="javascript:;">18</a>
                            <a data-page="19" href="javascript:;">19</a>
                            <span class="active">20</span>
                        </div>
                    </div>
                </div>

                <div class="app-card-body">
                    <!-- 前端分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="js/pagination.js"></script>
    <script>
        var pagination = new Pagination(".pagination", {
            pageIndex: 1, // 当前页数
            pageSize: 5, // 每页数量
            count: 100, // 总条数
            maxButtonCount: 5, // 分页按钮数量(可选)
            // 分页切换事件
            onPageChanged: function(pageIndex) {
                location.search == '' ? '/list' : '/list' + location.search + "&pageIndex=" + 5
            }
        })

        // 切换到指定分页
        // pagination.options.pageIndex = 5;
        // pagination.render();
    </script>
</body>

</html>